<template>
	<view class="container">
		
		<!--头部start-->
		<view class="header">
			<u-status-bar></u-status-bar>
			<view class="con">
				<image src="/static/images/back.png" mode="widthFix" class="back"></image>
				<view class="tit">账号被禁</view>
			</view>
		</view>
		<u-status-bar></u-status-bar>
		<!--头部end-->
		
		<!--账号被禁start-->
		<view class="accounts">
			<me-tabs v-model="tabIndex" :tabs="tabs" :height="tab_height"></me-tabs>
			<swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
				<swiper-item v-for="(tab,i) in tabs" :key="i">
					<mescroll-item ref="mescrollItem" :i="i" :index="tabIndex" :tabs="tabs" :height="height" :api_url="api_url" v-if="canInit"></mescroll-item>
				</swiper-item>
			</swiper>
		</view>
		<!--账号被禁end-->
		
	</view>
</template>

<script>
import MescrollItem from "./account/item.vue";

export default {
	components: {
	    /***** mescroll S *****/
	    //注册组件
	    MescrollItem
	    /***** mescroll E *****/
	},
		data() {
			return {
				/***** mescroll S *****/
				//定义tab的高度
				tab_height: 85,
				//指定tab头的api路径
				tabs_api_url: '',//'demo/swiper_tab',
				//设置列表api路径
				api_url : 'demo/swiper',
				//tab头选项（如设置了this.tabs_api_url则this.tabs为空数组即可）
				tabs:[{tabId:'t1',name:'留言'},{tabId:'t2',name:'我的留言'}],
				//默认tab的current下标（0，1，2，3...）
				tabIndex: 0,
				//需要固定swiper的高度
				height: "",
				//是否可以可初始化（可以用来延时初始化，用于达到某条件时机时才触发初始化mescroll）
				canInit: true,
				/***** mescroll E *****/
			}
		},
		onLoad(option) {
		    var that=this;
		    /***** mescroll S *****/
		    //需要固定swiper的高度 (需减去悬浮tabs的高度)
		    this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(this.tab_height) - uni.upx2px(105)  + 'px';
		    //api获取tab数据
		    if(this.tabs_api_url!='') {
		        this.ajax({ url: this.tabs_api_url }).then(res => {
		            this.tabs = res.data;
		        });
		    }
		    //如果带有$_GET[tabindex]参数，则指向相应的tab的current
		    if(typeof(option.tabindex)!='undefined' && option.tabindex)
		        this.tabIndex = option.tabindex;
		    //供其他页面使用的刷新事件监听：刷新当前TAB【在其他页面调用刷新的方法：uni.$emit('refreshTabs');】
		    uni.$on('refreshTabs',function(){
		        that.$refs.mescrollItem[that.tabIndex].refreshTab();//特别注意：这里需要指定tabindex的值；以及这里不能用this
		    });
		    /***** mescroll E *****/
		},
		methods:{
			swiperChange(e) {
			    this.tabIndex = e.detail.current
			}
		}

	}  
</script>

<style lang="scss">
	@import url("../../common/style.scss");
	@import url("member.scss");
	
	.container.me-tabs{
		background-color: #EEEEEF;
		padding: 0 25rpx;
		align-items: center;
		display: -webkit-flex;
		display: flex;
		.tabs-item{
			padding-bottom: 0;
		}
		
		.tabs-flex .tab-item{
			flex: inherit;
			margin-right: 7rpx;
			padding: 0 30rpx;
			font-size: 28rpx;
			color: #5F5D5D;
			height: 60rpx !important;
			line-height: 60rpx !important;
		}
		.tab-item.active{
			background-color: #474443;
			color: #FEFEFE !important;
			border-radius: 30rpx;
			font-weight: normal;
		}
		.tabs-line{
			display: none;
		}
	}
</style>